<template>
  <div class="notice-board">
    <div class="notice-head">公告资讯</div>
    <li class="notice-item">
      <a href="http://localhost:8080/service">
        中共中央宣传部举行“百年辉煌红土地 感恩奋进谱新篇”主题发布会
      </a>
    </li>
    <li class="notice-item">
      <a href="http://localhost:8080/guide">航班出港延误及取消信息公告</a>
    </li>
    <li class="notice-item">
      <a href="http://localhost:8080/info">
        关于暂停国内渠道国际信用卡支付的提示
      </a>
    </li>
    <li class="notice-item">
      <a>有关丹麦入境要求变更的温馨提示</a>
    </li>
    <li class="notice-item">
      <a>有关尼泊尔入境要求的温馨提示</a>
    </li>
    <li class="notice-item">
      <a>国航多措并举服务旅客“五一”顺畅出行</a>
    </li>
    <li class="notice-item">
      <a>学党史 强信念 跟党走-东航“五四共青团号”再出发</a>
    </li>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
  name: 'NoticeBoard',
  setup() {},
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.notice {
  &-board {
    position: relative;
    left: 1000px;
    top: -460px;
    border-radius: 15px;
    background: linear-gradient(14deg, #ffffff, #f8f8f8);
    width: 30%;
    height: 380px;
    border: 1px solid rgb(197, 197, 197);
    // margin-top: -450px;
  }
  &-head {
    margin: 0 auto;
    // width: 60%;
    height: 60px;
    line-height: 60px;
    font-weight: 900;
    font-size: 20px;
    background-color: $themeColor;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: white;
    // border-bottom: 3px dotted #999;
    margin-bottom: 20px;
  }
  &-item {
    list-style-type: square;
    margin: 0 auto;
    float: none;
    height: 40px;
    width: 70%;
    line-height: 40px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    a {
      text-decoration: none;
      color: $textColorGrey;
      &:hover {
        color: lighten($themeRed, 20%) !important;
        cursor: pointer;
      }
      &:visited {
        color: $themeRed;
      }
      &:active {
        color: lighten($themeRed, 20%);
      }
    }
  }
}
</style>
